<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        body {
            margin: 0;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .wrapper {
            width: 600px;
            height: 900px;
            background-color: #f0f0f0;
            margin: 0 auto;
        }

        .clock-box {
            width: 300px;
            height: 300px;
            background-color: #fff;
            border: 3px solid rgb(167, 111, 7);
            border-radius: 50%;
            position: relative;
        }

        .clock-box .circle {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -10px;
            margin-top: -10px;
            border-radius: 50%;
        }

        .clock-box ul {
            width: 300px;
            height: 300px;
            position: relative;
        }

        .clock-box ul li {
            position: absolute;
            top: 50%;
            left: 50%;
            /* 设置旋转中心 */
            transform-origin: center bottom;
        }

        .clock-box ul li:nth-of-type(1) {
            width: 8px;
            height: 60px;
            background-color: black;
            margin-left: -4px;
            margin-top: -60px;
            /* 旋转 */
            transform: rotate(0deg);
        }

        .clock-box ul li:nth-of-type(2) {
            width: 4px;
            height: 100px;
            background-color: green;
            margin-left: -2px;
            margin-top: -100px;
            /* 旋转 */
            transform: rotate(0deg);
        }

        .clock-box ul li:nth-of-type(3) {
            width: 2px;
            height: 120px;
            background-color: red;
            margin-left: -1px;
            margin-top: -120px;
            /* 旋转 */
            transform: rotate(0deg);
        }

        .week-box {
            width: 100%;
            height: 80px;
            background-color: #ccc;
            display: flex;
            align-items: center;
        }

        .week-box span {
            display: block;
            width: 60px;
            height: 40px;
            border: 2px solid transparent;
            text-align: center;
            line-height: 40px;
            margin: 0 2px;
            border-radius: 4px;
        }

        .week-box span.active {
            border: 2px solid deepskyblue;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="clock-box">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="circle"></div>
        </div>

        <div class="week-box">
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
            <span>七</span>
        </div>
    </div>

    <script>
        // 要求:
        // 制作时钟
        // 查看当前的时间(时分秒还有星期)

        // 思考:
        // 如何获取相关的标签
        // 如何获取当前的时间信息
        // 如何控制时针分针秒针旋转 
        // 是否需要使用定时器函数

        // 编码:
        // 1. 获取页面相关的标签
        var items = document.querySelectorAll(".clock-box ul li");
        var elements = document.querySelectorAll(".week-box span");

        // 2. 编写函数 处理星期的逻辑
        var setWeek = function (index) {
            for (var i = 0; i < elements.length; i++) {
                elements[i].className = ""
            }
            elements[index].className = "active";
        }
        // 测试
        // setWeek(3)

        // 3. 编写函数 处理时间的逻辑
        var setCurTime = function () {
            // 获取日期对象
            var dt = new Date();
            // 获取小时
            var h = dt.getHours();
            console.log(h);
            // 获取分钟
            var m = dt.getMinutes();
            console.log(m);
            // 获取秒
            var s = dt.getSeconds();
            console.log(s);
            // 获取毫秒
            var ms = dt.getMilliseconds();

            // 计算偏精确的时间
            s = s + ms / 1000;
            m = m + s / 60;
            h = h + m / 60;
            // 计算角度
            // 360 / 12 = 30°
            // 30° / 5 = 6°
            // 1°  

            // 设置时分秒标签的角度
            // 时针
            items[0].style["transform"] = "rotate(" + (h * 30) + "deg)";
            // 分针
            items[1].style["transform"] = "rotate(" + (m * 6) + "deg)";
            // 秒针
            items[2].style["transform"] = "rotate(" + (s * 6) + "deg)";
        }

        // 4. 初始化时钟
        setCurTime();

        // 5. 执行定时器函数
        var t = setInterval(function(){
            // 一直设置时钟
            setCurTime();
        },1000)

        // 6. 设置星期
        var index = new Date().getDay();
        console.log(index);
        setWeek(index - 1);
    </script>
</body>

</html>